<template>
  <div>
    <header class="intro" style="height: 100vh">
      <div class="intro-body">
        <div class="container">
          <div class="row">
            <div class="col-md-8 col-md-offset-2">
              <h1>LOWBAY <span class="brand-heading">跨境电商借卖</span></h1>
              <p class="intro-text">Cross-border e-commerce </p>
              <a href="#services" class="btn btn-circle page-scroll">
                <i class="fa fa-angle-double-down animated"></i>
              </a>
            </div>
          </div>
        </div>
      </div>
    </header>
    <!-- Services Section -->
    <div id="services" class="text-center">
      <div class="container">
        <div class="section-title center">
          <h2>内容简介</h2>
          <hr>
        </div>
        <div class="space"></div>
        <div class="row">
          <div class="col-md-3 col-sm-6 service"> <i class="fa fa-laptop"></i>
            <h4><strong>背景与意义</strong></h4>
            <p>新的商业模式和营运方式</p>
          </div>
          <div class="col-md-3 col-sm-6 service"> <i class="fa fa-code"></i>
            <h4><strong>团队介绍</strong></h4>
            <p>前端、后端与数据库</p>
          </div>
          <div class="col-md-3 col-sm-6 service"> <i class="fa fa-rocket"></i>
            <h4><strong>介绍与演示</strong></h4>
            <p>流畅的购物体验与货物管理</p>
          </div>
          <div class="col-md-3 col-sm-6 service"> <i class="fa fa-bullseye"></i>
            <h4><strong>相关技术</strong></h4>
            <p>Vue+ElementUI+SpringBoot+MySQL</p>
          </div>
        </div>
      </div>
    </div>
    <!-- Portfolio Section -->
    <div id="works">
      <div class="container"> <!-- Container -->
        <div class="section-title text-center center">
          <h2>项目背景与意义</h2>
          <hr>
          <div class="clearfix"></div>
          <p>中国自改革开放以来逐渐成为了世界上最大的工业生产国，在世界500多种主要工业产品当中，有220多种工业产品产量位居全球第一，“世界工厂”地位难以被撼动。</p>
          <p>国内工厂通过OEM这种模式蓬勃发展，但也因这种模式极易受外界因素影响。以外贸出口为导向的OEM工厂在面对外界需求减少的情况时往往会出现产能过剩的情况</p>
          <p>进而导致货物囤积、资金周转不灵等状况，时刻遭受着生存的考验。</p>
          <p>虽然如此，随着互联网的发展，OEM工厂可以借东风抓住机遇，通过网络平台强大的资源整合能力打响品牌，探索出新的商业模式和营运方式</p>
          <p>完成从生产代工厂到品牌厂商的身份转变，力求“让中国品牌走向世界”。</p>
        </div>

      </div>
    </div>
    <!-- Team Section -->
    <div id="team" class="text-center">
      <div class="container">
        <div class="section-title center">
          <h2>团队<strong>介绍</strong></h2>
          <hr>
          <p>本组共五名成员</p>
        </div>
        <div id="row">
          <div class="col-md-2 col-md-offset-1 col-sm-5">
            <div class="thumbnail"> <img src="./img/team/01.jpg" alt="..." class="img-circle team-img">
              <div class="caption">
                <h3>姜亮</h3>
                <p>组长+后端开发</p>
              </div>
            </div>
          </div>
          <div class="col-md-2 col-sm-5">
            <div class="thumbnail"> <img src="./img/team/02.jpg" alt="..." class="img-circle team-img">
              <div class="caption">
                <h3>王尚</h3>
                <p>后端开发</p>
              </div>
            </div>
          </div>
          <div class="col-md-2 col-sm-5">
            <div class="thumbnail"> <img src="./img/team/03.jpg" alt="..." class="img-circle team-img">
              <div class="caption">
                <h3>褚吕恒</h3>
                <p>前端开发</p>
              </div>
            </div>
          </div>
          <div class="col-md-2 col-sm-5">
            <div class="thumbnail"> <img src="./img/team/04.jpg" alt="..." class="img-circle team-img">
              <div class="caption">
                <h3>杜天苗</h3>
                <p>前端开发</p>
              </div>
            </div>
          </div>
          <div class="col-md-2 col-sm-5">
            <div class="thumbnail"> <img src="./img/team/05.jpg" alt="..." class="img-circle team-img">
              <div class="caption">
                <h3>李宗泰</h3>
                <p>数据库设计</p>
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>
    <!-- About Section -->
    <div id="about">
      <div class="container">
        <div class="section-title text-center center">
          <h2><strong>产品介绍</strong>与演示</h2>
          <hr>
        </div>
        <div class="row">
          <h2 style="margin-bottom: 60px"><strong>项目用例图</strong></h2>
          <div class="col-md-12"> <img src="./img/yongli.png" class="img-responsive" style="width:100%;"> </div>
        </div>
      </div>
      <div class="container">
        <div class="section-title text-center center">
          <hr>
        </div>
        <div class="row">
          <h2 style="margin-bottom: 60px"><strong>系统结构设计</strong></h2>
          <div class="col-md-6"> <img src="./img/jiegou.png" class="img-responsive"> </div>
          <div class="col-md-6">
            <h3>平台主要分三层——前端展示层，后端业务层以及数据库层。</h3>
            <div class="about-text"> <i class="fa fa-users"></i>
              <div class="padding-left"><h4>前端</h4>
                <p>采用 Vue 框架以及 element 组件，前端涉及 HTML，JS，CSS 以及等技术及语言。</p></div>
              <i class="fa fa-magic"></i>
              <div class="padding-left"><h4>后端</h4>
                <p>采用MVC设计模式，采用SpringBoot 框架以及 Java 语言。</p></div>
              <i class="fa fa-check-square-o"></i>
              <div class="padding-left"><h4>数据库</h4>
                <p>数据层采用 Mabatis 框架负责与数据库进行交互，并选择 Mysql 数据库进行数据存储。</p></div>
            </div>
          </div>
        </div>
      </div>
      <div class="container">
        <div class="section-title text-center center">
          <hr>
        </div>
        <div class="row">
          <h2 style="margin-bottom: 60px"><strong>数据库设计</strong></h2>
          <div class="col-md-12"> <img src="./img/shujuku.png" class="img-responsive" style="width:100%;"> </div>

        </div>
      </div>
    </div>
    <div class="container" style="margin-top: 50px;">
      <div class="section-title center">
        <h2><strong>模块结构</strong> 与演示</h2>
      </div>
      <div class="categories">
        <ul class="cat">
          <li>
            <ol class="type">
              <li><a href="#" data-filter="*" class="active">全部</a></li>
              <li><a href="#" data-filter=".login">登陆</a></li>
              <li><a href="#" data-filter=".user">个人信息</a></li>
              <li><a href="#" data-filter=".index">商品广场</a></li>
              <li><a href="#" data-filter=".store">网店管理</a></li>
              <li><a href="#" data-filter=".cart">购物车</a></li>
              <li><a href="#" data-filter=".order">订单管理</a></li>
            </ol>
          </li>
        </ul>
        <div class="clearfix"></div>
      </div>
      <div class="img-container" style="">
        <h3>登陆页面模块结构</h3>
        <img src="./img/portfolio/login1.png" alt="">
        <hr style="background: #797979;width: 100%;height: 1px;">
        <h3>登陆页面模块演示</h3>
        <img src="./img/portfolio/login2.png" alt="">
        <hr style="background: #797979;width: 100%;height: 1px;">

        <h3>个人信息模块结构</h3>
        <img src="./img/portfolio/user1.png" alt="">
        <hr style="background: #797979;width: 100%;height: 1px;">

        <h3>个人信息模块演示</h3>
        <img src="./img/portfolio/user2.png" alt="">
        <hr style="background: #797979;width: 100%;height: 1px;">

        <h3>商品广场模块结构</h3>
        <img src="./img/portfolio/index1.png" alt="">
        <hr style="background: #797979;width: 100%;height: 1px;">

        <h3>商品广场模块演示</h3>
        <img src="./img/portfolio/index2.png" alt="">
        <hr style="background: #797979;width: 100%;height: 1px;">

        <h3>网店管理模块结构</h3>
        <img src="./img/portfolio/store1.png" alt="">
        <hr style="background: #797979;width: 100%;height: 1px;">

        <h3>网店管理模块演示</h3>
        <img src="./img/portfolio/store2.png" alt="">
        <hr style="background: #797979;width: 100%;height: 1px;">

        <h3>购物车心愿单模块结构</h3>
        <img src="./img/portfolio/cart1.png" alt="">
        <hr style="background: #797979;width: 100%;height: 1px;">

        <h3>购物车心愿单模块演示</h3>
        <img src="./img/portfolio/cart2.jpg" alt="">
        <hr style="background: #797979;width: 100%;height: 1px;">

        <h3>订单管理模块结构</h3>
        <img src="./img/portfolio/order1.png" alt="">
        <hr style="background: #797979;width: 100%;height: 1px;">

        <h3>订单管理模块演示</h3>
        <img src="./img/portfolio/order2.png" alt="">

    </div>
      <div style="display: none" class="row">
        <div class="portfolio-items">
          <div class="col-sm-6 col-md-3 col-lg-3 login">
            <div class="portfolio-item">
              <h4> 模块结构</h4>
              <small>登陆页面模块结构</small>
              <img src="./img/portfolio/login1.png" alt="Project Title">
            </div>
          </div>
          <div class="col-sm-6 col-md-3 col-lg-3 login">
            <div class="portfolio-item">
              <div class="hover-bg"> <a href="./img/portfolio/login2.png" title="Project description" rel="prettyPhoto" style="">
                <div class="hover-text">
                  <h4>模块演示</h4>
                  <small>登陆页面模块演示</small>
                </div>
                <img src="./img/portfolio/login2.png" class="img-responsive" alt="Project Title"> </a> </div>
            </div>
          </div>
          <div class="col-sm-6 col-md-3 col-lg-3 user">
            <div class="portfolio-item">
              <div class="hover-bg"> <a href="./img/portfolio/user1.png" title="Project description" rel="prettyPhoto">
                <div class="hover-text">
                  <h4>模块结构</h4>
                  <small>个人信息模块结构</small>
                </div>
                <img src="./img/portfolio/user1.png" class="img-responsive" alt="Project Title"> </a> </div>
            </div>
          </div>
          <div class="col-sm-6 col-md-3 col-lg-3 user">
            <div class="portfolio-item">
              <div class="hover-bg"> <a href="./img/portfolio/user2.png" title="Project description" rel="prettyPhoto">
                <div class="hover-text">
                  <h4>模块演示</h4>
                  <small>个人信息模块演示</small>
                </div>
                <img src="./img/portfolio/user2.png" class="img-responsive" alt="Project Title"> </a> </div>
            </div>
          </div>
          <div class="col-sm-6 col-md-3 col-lg-3 index">
            <div class="portfolio-item">
              <div class="hover-bg"> <a href="./img/portfolio/index1.png" title="Project description" rel="prettyPhoto">
                <div class="hover-text">
                  <h4>模块结构</h4>
                  <small>商品广场模块结构</small>
                </div>
                <img src="./img/portfolio/index1.png" class="img-responsive" alt="Project Title"> </a> </div>
            </div>
          </div>
          <div class="col-sm-6 col-md-3 col-lg-3 index">
            <div class="portfolio-item">
              <div class="hover-bg"> <a href="./img/portfolio/index2.png" title="Project description" rel="prettyPhoto">
                <div class="hover-text">
                  <h4>模块演示</h4>
                  <small>商品广场模块演示</small>
                </div>
                <img src="./img/portfolio/index2.png" class="img-responsive" alt="Project Title"> </a> </div>
            </div>
          </div>
          <div class="col-sm-6 col-md-3 col-lg-3 store">
            <div class="portfolio-item">
              <div class="hover-bg"> <a href="./img/portfolio/store1.png" title="Project description" rel="prettyPhoto">
                <div class="hover-text">
                  <h4>模块结构</h4>
                  <small>网店管理模块结构</small>
                </div>
                <img src="./img/portfolio/store1.png" class="img-responsive" alt="Project Title"> </a> </div>
            </div>
          </div>
          <div class="col-sm-6 col-md-3 col-lg-3 store">
            <div class="portfolio-item">
              <div class="hover-bg"> <a href="./img/portfolio/store2.png" title="Project description" rel="prettyPhoto">
                <div class="hover-text">
                  <h4>模块演示</h4>
                  <small>网店管理模块演示</small>
                </div>
                <img src="./img/portfolio/store2.png" class="img-responsive" alt="Project Title"> </a> </div>
            </div>
          </div>
          <div class="col-sm-6 col-md-3 col-lg-3 cart">
            <div class="portfolio-item">
              <div class="hover-bg"> <a href="./img/portfolio/cart1.png" title="Project description" rel="prettyPhoto">
                <div class="hover-text">
                  <h4>模块结构</h4>
                  <small>购物车心愿单模块结构</small>
                </div>
                <img src="./img/portfolio/cart1.png" class="img-responsive" alt="Project Title"> </a> </div>
            </div>
          </div>
          <div class="col-sm-6 col-md-3 col-lg-3 cart">
            <div class="portfolio-item">
              <div class="hover-bg"> <a href="./img/portfolio/cart2.jpg" title="Project description" rel="prettyPhoto">
                <div class="hover-text">
                  <h4>模块演示</h4>
                  <small>购物车心愿单模块演示</small>
                </div>
                <img src="./img/portfolio/cart2.jpg" class="img-responsive" alt="Project Title"> </a> </div>
            </div>
          </div>
          <div class="col-sm-6 col-md-3 col-lg-3 order">
            <div class="portfolio-item">
              <div class="hover-bg"> <a href="./img/portfolio/order1.png" title="Project description" rel="prettyPhoto">
                <div class="hover-text">
                  <h4>模块结构</h4>
                  <small>订单管理模块结构</small>
                </div>
                <img src="./img/portfolio/order1.png" class="img-responsive" alt="Project Title"> </a> </div>
            </div>
          </div>
          <div class="col-sm-6 col-md-3 col-lg-3 order">
            <div class="portfolio-item">
              <div class="hover-bg"> <a href="img/portfolio/order2.png" title="Project description" rel="prettyPhoto">
                <div class="hover-text">
                  <h4>模块演示</h4>
                  <small>订单管理模块演示</small>
                </div>
                <img src="./img/portfolio/order2.png" class="img-responsive" alt="Project Title"> </a> </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Testimonials Section -->
    <div id="testimonials" class="text-center">
      <div class="container">
        <div class="section-title center">
          <h2><strong>相关技术</strong></h2>
          <hr>
        </div>
        <div class="row">
          <div class="col-md-8 col-md-offset-2">
            <div id="testimonial" class="owl-carousel owl-theme">
              <div class="item">
                <p>Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
                </p>
                <p><strong>Vue</strong></p>
              </div>
              <div class="item">
                <p>SpringBoot是由Pivotal团队提供的全新框架，其设计目的是用来简化新Spring应用的初始搭建以及开发过程。该框架使用了特定的方式来进行配置，从而使开发人员不再需要定义样板化的配置。
                </p>
                <p><strong>SpringBoot</strong></p>
              </div>
              <div class="item">
                <p>MyBatis 是支持定制化 SQL、存储过程以及高级映射的优秀的持久层框架，避免了几乎所有的 JDBC 代码和手动设置参数以及获取结果集。MyBatis 可以对配置和原生Map使用简单的 XML 或注解，将接口和 Java 的 POJOs映射成数据库中的记录。
                </p>
                <p><strong>MyBatis</strong></p>
              </div>
              <div class="item">
                <p>Ajax用来描述一种使用现有技术集合的‘新’方法。使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载整个页面，这使得程序能够更快地回应用户的操作。

                </p>
                <p><strong>Ajax</strong></p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Contact Section -->
    <div id="contact" class="text-center">
      <div class="container">
        <div class="section-title center">
          <h2>项目<strong>总结</strong></h2>
          <hr>
          <p>通过此项目，我们收获良多。</p>
        </div>
        <div class="col-md-8 col-md-offset-2">
          <div class="col-md-4"> <h3>能力</h3>
            <p>掌握前后端分离的开发模式<br>
              学习Vue、SpringBoot等框架<br>
              掌握软件项目开发流程<br>
              UML类图设计<br>
              掌握数据库设计
            </p>
          </div>
          <div class="col-md-4"> <h3>业务</h3>
            <p>了解了OEM商业模式
              <br>
              了解了三方借卖平台营运方式

            </p>
          </div>
          <div class="col-md-4"> <h3>团队</h3>
            <p>培养了团队合作能力
            </p>
          </div>
          <hr>
          <div class="clearfix"></div>
        </div>
        <div class="col-md-8 col-md-offset-2">
          <div class="section-title center">
            <h2><strong>Q&A</strong></h2>
          </div>


        </div>
      </div>
    </div>
    <nav id="footer">
    <div class="container">
      <div class="pull-left fnav">
        <p>东软跨境电商借卖平台</p>
      </div>
      <div class="pull-right fnav">
        <ul class="footer-social">
          <li><a href="#"><i class="fa fa-facebook"></i></a></li>
          <li><a href="#"><i class="fa fa-twitter"></i></a></li>
          <li><a href="#"><i class="fa fa-dribbble"></i></a></li>
          <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
        </ul>
      </div>
    </div>
  </nav>
  </div>

</template>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script type="text/javascript" src="js/jquery.1.11.1.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/SmoothScroll.js"></script>
<script type="text/javascript" src="js/jquery.prettyPhoto.js"></script>
<script type="text/javascript" src="js/jquery.isotope.js"></script>
<script type="text/javascript" src="js/jquery.counterup.js"></script>
<script type="text/javascript" src="js/waypoints.js"></script>
<script type="text/javascript" src="js/jqBootstrapValidation.js"></script>
<script type="text/javascript" src="js/contact_me.js"></script>
<script src="js/owl.carousel.js"></script>

<!-- Javascripts
    ================================================== -->
<script type="text/javascript" src="js/main.js"></script>
<script>
export default {
  name: "homeee"
}
</script>

<style scoped>
  @import "css/bootstrap.css";
  @import "fonts/font-awesome/css/font-awesome.css";
  @import "css/owl.carousel.css";
  @import "css/owl.theme.css";
  @import "css/style.css";
  @import "css/prettyPhoto.css";

  .img-container{
    display: flex;flex-direction: column;align-items: center
  }
  .img-container>img{
    width: 60%;
    height: 60%;
  }
  hr{

  }
</style>
<!-- Bootstrap -->
<!--<link rel="stylesheet" type="text/css"  href="css/bootstrap.css">-->
<!--<link rel="stylesheet" type="text/css" href="fonts/font-awesome/css/font-awesome.css">-->

<!--&lt;!&ndash; Slider-->
<!--    ================================================== &ndash;&gt;-->
<!--<link href="css/owl.carousel.css" rel="stylesheet" media="screen">-->
<!--<link href="css/owl.theme.css" rel="stylesheet" media="screen">-->

<!--<link rel="stylesheet" type="text/css"  href="css/style.css">-->
<!--<link rel="stylesheet" type="text/css" href="css/prettyPhoto.css">-->
<!--<link href='http://fonts.useso.com/css?family=Lato:400,700,900,300' rel='stylesheet' type='text/css'>-->
<!--<link href='http://fonts.useso.com/css?family=Open+Sans:400,700,800,600,300' rel='stylesheet' type='text/css'>-->
